﻿<UserControl x:Class="Microsoft.Samples.Kinect.BasicInteractions.StorySelectionControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:p="clr-namespace:Microsoft.Samples.Kinect.BasicInteractions.Properties"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:Microsoft.Samples.Kinect.BasicInteractions" x:Name="root">
    <Grid>
        <Grid Background="Transparent" x:Name="MainGrid" Margin="0,50,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="100" />
                <RowDefinition x:Name="SubCategoryRow" Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="130" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="130" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Row="0" Grid.RowSpan="2" Grid.Column="1">
                <Grid.Style>
                    <Style>
                        <Setter Property="Grid.Background" Value="Transparent" />
                    </Style>
                </Grid.Style>
            </Grid>
            <Grid x:Name="TopRow" Grid.Row="0" Grid.Column="1">
                <local:HoverDwellButton x:Name="HomeButton" HoverClick="HomeButton_HoverClick" Magnetic="True" Margin="0,0,0,0"
                                    HorizontalAlignment="Right" SoundOnEnter="slot_roll_on.wav" SoundOnClick="snd_buttonselect.wav">
                    <Grid>
                        <Ellipse Width="100" Height="100">
                            <Ellipse.Style>
                                <Style>
                                    <Setter Property="Ellipse.Fill" Value="{StaticResource DefaultColorBrush}" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsSelected, ElementName=HomeButton}"
                                                     Value="true">
                                            <Setter Property="Ellipse.Fill" Value="{StaticResource SelectedColorBrush}" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Ellipse.Style>
                        </Ellipse>
                        <Image Source="/BasicInteractions-WPF;component/Resources/Images/home.png" HorizontalAlignment="Center"
                               VerticalAlignment="Center" Stretch="None" />
                    </Grid>
                </local:HoverDwellButton>

                <TextBlock
                    Text="{Binding Path=Category.Title, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:StorySelectionControl}}}"
                    HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="Gray" FontSize="75"
                    FontFamily="Segoe UI" FontWeight="Light" Margin="0" />

            </Grid>
            <Grid Grid.Row="1" Grid.Column="1" Margin="0,25,0,0" >
                <ItemsControl x:Name="Subcategories"
                              ItemsSource="{Binding Path=Category.Subcategories,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:StorySelectionControl}}}"
                              Margin="0,0,100,0">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <local:HoverDwellButton x:Name="SubcategoryButton" Magnetic="True" 
                                                SoundOnEnter="slot_roll_on.wav" SoundOnClick="snd_buttonselect.wav" Background="Transparent" Margin="0,0,50,0"
                                                HorizontalAlignment="Left" VerticalAlignment="Top" HoverClick="SubcategoryClick">
                                <TextBlock x:Name="SubcategoryText" Text="{Binding}" MinWidth="50" 
                                           HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="{StaticResource DefaultColorBrush}" FontSize="42"
                                           FontFamily="Segoe UI" FontWeight="Light" Margin="0,0,0,0" IsHitTestVisible="False" />
                            </local:HoverDwellButton>
                            <DataTemplate.Triggers>
                                <Trigger SourceName="SubcategoryButton" Property="IsHoveredOver" Value="True">
                                    <Setter TargetName="SubcategoryText" Property="TextBlock.FontWeight"
                                            Value="ExtraBold" />
                                </Trigger>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Value="True">
                                            <Condition.Binding>
                                                <MultiBinding Converter="{StaticResource EqualToConverter}">
                                                    <Binding ElementName="SubcategoryText" Path="Text" />
                                                    <Binding Path="Subcategory" ElementName="root" />
                                                </MultiBinding>
                                            </Condition.Binding>
                                        </Condition>
                                    </MultiDataTrigger.Conditions>
                                    <Setter TargetName="SubcategoryText" Property="TextBlock.FontWeight" Value="Bold" />
                                </MultiDataTrigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>
            <Grid x:Name="LeftScrollRegion" Background="{StaticResource InactiveScrollRegionBrush}" Grid.Row="2" Grid.Column="0" Margin="0,100,0,100"
                  Visibility="{Binding Path=CanScrollLeft, ElementName=root}">
                <Image Source="/BasicInteractions-WPF;component/Resources/Images/arrow_icon.png" Stretch="None" IsHitTestVisible="False"
                       VerticalAlignment="Center" HorizontalAlignment="Center">
                    <Image.LayoutTransform>
                        <RotateTransform Angle="180" />
                    </Image.LayoutTransform>
                </Image>
            </Grid>
            <Grid x:Name="RightScrollRegion" Background="{StaticResource InactiveScrollRegionBrush}" Grid.Row="2" Grid.Column="2" Margin="0,100,0,100" 
                  Visibility="{Binding Path=CanScrollRight, ElementName=root}">

                <Image Source="/BasicInteractions-WPF;component/Resources/Images/arrow_icon.png" Stretch="None" IsHitTestVisible="False"
                       VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Grid>

            <Grid Background="White" Grid.Row="2" Grid.Column="1" Margin="0,90,0,0" >
                <ScrollViewer x:Name="ContentScrollViewer" ScrollViewer.VerticalScrollBarVisibility="Hidden" 
                              ScrollViewer.HorizontalScrollBarVisibility="Auto" Style="{StaticResource HorizontalScrollViewerStyle}"
                              Padding="0,0,0,0">
                    <Grid>
                        <ItemsControl x:Name="ContentItems"
                                      ItemsSource="{Binding Path=Category.Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:StorySelectionControl}}}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <UniformGrid Rows="2"
                                                 Height="{Binding ActualHeight, ElementName=ContentScrollViewer, Mode=OneWay}" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>

                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <local:HoverDwellButton x:Name="StoryButton" HoverClick="StoryButtonClick" Width="345"
                                                        Height="305" Margin="20,10,40,60" SoundOnEnter="slot_roll_on.wav" SoundOnClick="snd_buttonselect.wav"
                                                        Style="{StaticResource EnlargingHoverDwellButton}" MaxWidth="{Binding ActualHeight, ElementName=StoryButton, Mode=OneWay}">
                                        <local:HoverDwellButton.RenderTransform>
                                            <ScaleTransform ScaleX="1.0" ScaleY="1.0" />
                                        </local:HoverDwellButton.RenderTransform>
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="200" />
                                                <RowDefinition Height="105" />
                                            </Grid.RowDefinitions>
                                            
                                            <Border x:Name="ImageBorder" Grid.Row="0"
                                                    BorderBrush="{StaticResource SelectedColorBrush}">
                                                <Grid>
                                                    <Image Source="{Binding ContentImage}" Margin="1,1,1,1" RenderOptions.BitmapScalingMode="HighQuality"
                                                           Stretch="UniformToFill" />
                                                    <Border BorderThickness="2" BorderBrush="White"
                                                            VerticalAlignment="Top" HorizontalAlignment="Left" Width="50" Height="50">
                                                        <TextBlock x:Name="NumberText"
                                                                   Background="{StaticResource DefaultColorBrush}" Text="{Binding ItemId}" IsHitTestVisible="False" Width="46"
                                                                   Foreground="White" TextAlignment="Center" Margin="0,0" Padding="1" FontFamily="Segoe" FontWeight="Bold" FontSize="26" />
                                                    </Border>
                                                </Grid>
                                            </Border>
                                            <TextBlock x:Name="StoryTitle"  Text="{Binding Title}" Foreground="Black" Grid.Row="1"
                                                       Margin="0,25,0,0" FontFamily="Segoe" FontWeight="Light" HorizontalAlignment="Left" VerticalAlignment="Top"
                                                       FontSize="30" Height="80" TextAlignment="Left" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" />

                                        </Grid>

                                    </local:HoverDwellButton>


                                    <DataTemplate.Triggers>
                                        <MultiDataTrigger>
                                            <MultiDataTrigger.Conditions>
                                                <Condition Value="False">
                                                    <Condition.Binding>
                                                        <MultiBinding Converter="{StaticResource EqualToConverter}">
                                                            <Binding Path="Subcategory" />
                                                            <Binding Path="Subcategory" ElementName="root" />
                                                        </MultiBinding>
                                                    </Condition.Binding>
                                                </Condition>
                                                <Condition Value="False">
                                                    <Condition.Binding>
                                                        <MultiBinding Converter="{StaticResource EqualToConverter}">
                                                            <Binding Path="SubcategoryAll"
                                                                     Source="{x:Static p:Settings.Default}" />
                                                            <Binding Path="Subcategory" ElementName="root" />
                                                        </MultiBinding>
                                                    </Condition.Binding>
                                                </Condition>
                                            </MultiDataTrigger.Conditions>
                                            <Setter Property="Visibility" Value="Collapsed" />
                                        </MultiDataTrigger>
                                        <DataTrigger Binding="{Binding IsSelected, ElementName=StoryButton}" Value="true">
                                            <Setter TargetName="StoryTitle" Property="TextBlock.Foreground"
                                                Value="{StaticResource SelectedColorBrush}" />
                                            <Setter TargetName="StoryTitle" Property="TextBlock.FontWeight" Value="Bold" />
                                            <Setter TargetName="ImageBorder" Property="Border.BorderThickness" Value="8" />
                                            <Setter TargetName="NumberText" Property="TextBlock.Background"
                                                    Value="{StaticResource SelectedColorBrush}" />
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding IsHoveredOver, ElementName=StoryButton}" Value="true">
                                            <Setter TargetName="StoryTitle" Property="TextBlock.Foreground"
                                            Value="{StaticResource SelectedColorBrush}" />
                                            <Setter TargetName="ImageBorder" Property="Border.BorderThickness" Value="4" />
                                            <Setter TargetName="NumberText" Property="TextBlock.Background"
                                                    Value="{StaticResource SelectedColorBrush}" />
                                        </DataTrigger>
                                    </DataTemplate.Triggers>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Grid>
                </ScrollViewer>
            </Grid>
        </Grid>
        <local:StoryControl Margin="0,0,0,-20" x:Name="Story" Visibility="Hidden" IsHitTestVisible="False"
                            Story="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:StorySelectionControl}}}" />
    </Grid>
</UserControl>